import React from 'react';
import './index.css';

interface ProductCardProps {
  id: string;
  name: string;
  price: number;
  originalPrice?: number;
  image: string;
  sales?: number;
  onProductClick?: (id: string) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({
  id,
  name,
  price,
  originalPrice,
  image,
  sales,
  onProductClick
}) => {
  const handleClick = () => {
    onProductClick?.(id);
  };

  const formatPrice = (price: number) => {
    return `¥${price.toFixed(2)}`;
  };

  return (
    <div className="product-card" onClick={handleClick}>
      <div className="product-card__image-wrapper">
        <img
          src={image}
          alt={name}
          className="product-card__image"
        />
      </div>
      
      <div className="product-card__content">
        <div className="product-card__name">{name}</div>
        
        <div className="product-card__price-wrapper">
          <span className="product-card__price">
            {formatPrice(price)}
          </span>
          {originalPrice && originalPrice > price && (
            <span className="product-card__original-price">
              {formatPrice(originalPrice)}
            </span>
          )}
        </div>
        
        {sales && (
          <div className="product-card__sales">
            已售 {sales}
          </div>
        )}
      </div>
    </div>
  );
};

export default ProductCard; 